<template>
  <div class="nav">
    <div class="nav_con">
      <div class="left">
        <i class="back iconfont icon-fanhui" v-if="back"></i>
        <slot name="left"></slot>
      </div>
      <div class="center">
        <slot name="title">{{title}}</slot>
      </div>
      <div class="right">
        <slot name="right"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Navigation",
  props: {
    back:{
      type:Boolean,
      default:false
    },
    title:{
      type:String,
      default:"导航标题"
    }
  }
}
</script>

<style lang="less">
.nav {
  height: 64px;

  .nav_con {
    height: 64px;
    background-color: black;
    color: white;
    position:fixed;
    left: 0;
    top: 0;
    right: 0;
    z-index: 1000;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 15px;
    box-sizing: border-box;
    font-size:20px;
  }

  .left {
    i {
      font-size:25px;
    }
  }
}
</style>